<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="yes" name="apple-touch-fullscreen" />
        <meta content="telephone=no,email=no" name="format-detection" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>我的</title>

        <link rel="stylesheet" href="css/reset.css" media="screen" title="no title">
        <link rel="stylesheet" href="css/invoices.css" media="screen" title="no title">
        <link rel="stylesheet" href="css/mescroll.min.css" media="screen" title="no title">
        <script src="js/flexible.js" ></script>
        <script src="js/jquery-2.1.3.min.js" ></script>
        <script src="js/cleave.min.js"></script>
        <script src="js/util.js"></script>
        <script src="js/vue.min.js"></script>
        <script src="js/clipboard.min.js"></script>
        <script src="js/mescroll.min.js" ></script>

    </head>
    <body >
        
        <div id="change_history_page" class="change-history-page"  v-cloak>
            <!-- 头部栏 -->
            <div class="title-bar" >
                <div class="left-img" id="back">
                    <img src="img/jt_l.png" alt="">
                </div>
                <div class="title" >
                    签纸贺兑换历史
                </div>
            </div>

            <div class="main-content ">
                <div id="mescroll" class="mescroll">
                <div class="header">
                    <div class="qzhh-logo">
                        <img src="img/qzh_logo.png" alt="">
                    </div>
                    <div class="name">
                        {{faceValue}}元兑换券
                    </div>
                    <div class="date">
                        {{date}}兑换为以下产品
                    </div>

                </div>

                
                    <div class="">
                        <ul class="history" id="history_list">
                            <li class="history-item" v-for="(item,index) in historyData" :key="index" >
                                <div class="top clear">
                                    <div class="fl  clear left">
                                        <div class="img fl">
                                            <img :src="item.cardInfo.brandImg" alt="">
                                        </div>
                                        <div class="name fl">
                                            {{item.cardInfo.brandName}}
                                        </div>
                                    </div>
                                    <div class="fr clear right" @click="goExplain">
                                        <div class="fl text">
                                            使用说明
                                        </div>
                                        <div class="fl img">
                                            <img src="img/jt_r.png" alt="">
                                        </div>
                                    </div>
                                </div>
        
                                <div class="bottom clear">
                                    <div class="fl left">
                                        <div class="name">
                                            {{item.cardInfo.goodsName}}
                                        </div>
                                        <div class="date">
                                            有效期至：{{item.cardInfo.expireDate}}
                                        </div>
                                    </div>
                                    <div class="fr btn right">
                                        <input  type="button" 
                                                :value="item.cardInfo.goodsType == '01' && item.cardInfo.isShowCard ? '收起' :'查卡密'"
                                                v-if="item.cardInfo.goodsType == '01'"
                                                @click="seeCard(item)">
        
                                        <input  type="button" 
                                                value="去使用"
                                                v-else-if="item.cardInfo.goodsType == '02'"
                                                @click="employ" >        
                                       
                                        
                                    </div>
                                </div>
        
                                <div class="card-info" :style="item.cardInfo.isShowCard ? 'max-height: 1000px' : 'max-height: 0'">
                                    <div class="item clear">
                                        <div class="fl title">
                                            卡号：
                                        </div>
                                        <div class="fl card">
                                            {{item.cardInfo.card}}
                                        </div>
                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn" :data-val="item.cardInfo.card">
                                        </div>
                                    </div>
        
                                    <div class="item clear">
                                        <div class="fl title">
                                            密码：
                                        </div>
                                        <div class="fl card">
                                            {{item.cardInfo.password}}
                                        </div>
                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn" :data-val="item.cardInfo.password" >
                                        </div>
                                    </div>
        
                                </div>
                                
                            </li>
                        </ul>
                    </div>

                   
                    <div class="mescroll-upwarp" 
                         style="visibility: visible; display: block;margin-top: 50%"
                         v-if="showZwsj"
                         >
                        <p class="upwarp-nodata">暂无数据</p>
                    </div>

                </div>

               



            </div>

           

        </div>

      
    </body>
    <script type="text/javascript">
        var Vue=new Vue({
            el:"#change_history_page",
            data:{
               
                showZwsj:false,
                faceValue:1000,
                date:"2022-02-28",
                historyData:[
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "淘票票",
                                        "goodsName": "淘票票电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "01",
                                        "goodsId": "10086",
                                    },
                                    

                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                },
                                {
                                    "cardInfo": {
                                        "brandImg": "http://suo.im/6kBZbP",
                                        "brandName": "美团",
                                        "goodsName": "美团电子卡100元",
                                        "expireDate": "2022-02-28",
                                        "goodsType": "02",
                                        "goodsId": "100876"
                                    }
                                }
                            ]
                
                
            },
            created(){
              //初始化数据
              this.initializeData();
            },
            mounted(){
                

            },
            methods:{
                //初始化
                initializeData(){
                    for(var i=0;i<this.historyData.length;i++){
                        this.historyData[i].cardInfo.isShowCard = false;
                    }
                },
                //点击查看卡密
                seeCard(item){
                    console.log(item)
                    item.cardInfo.card = "6789  3456  3456  6789";
                    item.cardInfo.password = "6666  8888  3456  6789";
                    item.cardInfo.isShowCard = !item.cardInfo.isShowCard;
                    this.historyData = Object.assign([],this.historyData);
                },
                //使用说明
                goExplain(){
                    window.location="instructions.html";
                },
                //去使用
                employ(){

                }                            
            },
            
        })


     

        /* jq */
        $(function(){
            //返回
            $("#back").on("click", function () {
                window.history.go(-1);
            });
       
            //复制到剪切板
            var clipboard = new ClipboardJS('.copy-btn', {
                text: function(that) {
                    return $(that).data("val");
                }
            });
            clipboard.on('success', function(e) {
                console.log("success",e);
                $.toast("复制成功");
            });

            clipboard.on('error', function(e) {
                console.log("eror",e);
                $.toast("复制失败");
            });

    //         var postData = $.parse_url();
    //         console.log("-----");
    //         console.log(postData);
    //         console.log("-----");
    //         var token = postData.token;
    //         var os = postData.os;
    //         var openid = postData.openid;

    // //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
            var mescroll = new MeScroll("mescroll", {
                down: {
                    use:false,
                },
                up: {
                    auto: true,//初始化完毕,是否自动触发上拉加载的回调
                    isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                    htmlNodata: '<p class="upwarp-nodata">没有更多了</p>',
                }
            });

    //         /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    //         function getListData(page) {
    //             console.log("上拉加载", page)
    //             //联网加载数据
    //             getListDataFromNet(page.num, page.size, function (curPageData) {
    //                 console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length);
    //                 mescroll.endSuccess(curPageData.rowList.length);
    //                 setListData(curPageData.rowList);
    //             }, function () {
    //                 //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
    //                 mescroll.endErr();
    //             });
    //         }

    //         /*设置列表数据*/
    //         function setListData(curPageData) {
    //             var html = '';
    //             if( curPageData.length ==0){
    //                 Vue._data.showZwsj = true;
    //                 return;
    //             }
    //             for (var i = 0; i < curPageData.length; i++) {
    //                 var pd = curPageData[i];
    //                 Vue._data.historyData.push(pd)
                 
    //             }
    //         }

    //         function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {

    //             var json = {token: token, os: os, openid: openid, page: pageNum, pageSize: pageSize};
    //             $.ajax({
    //                 type: 'POST',
    //                 url: '/hzf/sales/myDevHistory',
    //                 dataType: 'json',
    //                 data: json,
    //                 success: function (data) {
    //                     console.log("---------")
    //                     var data = JSON.parse(data.data);
    //                     successCallback(data);
    //                 },
    //                 error: errorCallback
    //             });

    //         }

   
        })
    </script>
</html>

